<template>
  <div class="spl-container">
    <breadcrumb :data="pathData"></breadcrumb>
    <div class="emp-container">
      <div class="search-row m-form mt-15">
        <el-date-picker
          v-model="yearMonth"
          type="month" value-format="yyyy-MM" class="label-sel">
        </el-date-picker>

        <el-input placeholder="搜索台账编号" v-model="salaryAccountCode" class="ml-30 w-280"></el-input>
        <el-button type="primary" class="opt-btn ml-20 s-btn" icon="icon el-icon-search" @click="getTableData">查询</el-button>

      </div>

      <dTable @fetch="getTableData" ref="empTable" :tableHeight="tableHeight">
        <el-table-column type="selection" fixed="left" align="center"></el-table-column>
        <el-table-column prop="serialNumber" label="台账编号" width="250" header-align="center" align="left">
          <template slot-scope="scope">
            <router-link v-text="scope.row.serialNumber" class="text-blue"
                         :to="'/salaryAccountDetails?serialNumber='+scope.row.serialNumber">
            </router-link>
          </template>
        </el-table-column>
        <el-table-column prop="obligorName" label="扣缴义务人" width="220" header-align="center" align="left"></el-table-column>
        <el-table-column prop="yearDate" label="台账年月" width="220" header-align="center" align="center" :formatter="formatDateFun"></el-table-column>
        <el-table-column prop="totalNumber" label="总人数" width="220" header-align="center" align="left"></el-table-column>
        <el-table-column prop="totalAmount" label="总金额" width="220" header-align="center" align="right"></el-table-column>
        <el-table-column prop="actualTotalAmount" label="实发总金额" width="220" header-align="center" align="right"></el-table-column>
        <el-table-column prop="taxTotalAmount" label="个税总金额" width="220" header-align="center" align="right"></el-table-column>
        <el-table-column prop="billCode" label="账单编号" header-align="center" align="left"></el-table-column>
          <template slot="pagination-btns">
            <el-button type="primary" class="opt-btn s-btn" icon="ic-export" @click="exportData">导出</el-button>
            <el-button class="opt-btn white-btn s-btn" icon="el-icon-delete" @click="delData">删除</el-button>
          </template>
      </dTable>
    </div>
  </div>
</template>
<script>
  import dTable from '../../../components/common/table'
  export default {
    components: {
      dTable
    },
    data () {
      return {
        // 导航
        pathData: [
          { name: '薪酬管理' },
          { name: '薪酬台账', path: '/salaryAccount' }
        ],
        yearMonth: this.$global.getNowDate('yyyy-MM'),
        salaryAccountCode: ''
      }
    },
    created () {
      this.$nextTick(() => {
        this.$nextTick(() => {
          this.getTableData()
        })
      })
    },
    computed: {
      tableHeight: function () {
        return this.$global.bodyHeight - 220 + 'px'
      }
    },
    methods: {
      formatDateFun (row, column, cellValue, index) {
        return cellValue == null ? '-' : this.$global.dateToStrByFormart(cellValue,'yyyy-MM')
      },
      getTableData (params = []) {
        params =
          [
            { property: 'yearDate', value: this.yearMonth },
            { property: 'serialNumber', value: this.salaryAccountCode }
          ]
        this.$refs.empTable.fetch(params, 'post', '/salary/platformBills/page')
        this.drawer = false // 关闭更多筛选
      },
      //导出
      exportData(){
        var requestParams = this.$refs.empTable.requestParams
        var query = requestParams.query
        var params = {yearDate:query[0].value,serialNumber:query[1].value}
        this.$downloadFile('/salary/platformBills/export', 'post', params, this.$global.EXCEL, '薪酬台账')
      },
      //删除
      delData(){
        var selections = this.$refs.empTable.selections
        if(selections.length==0){
          this.$message({
            message: '请选择需要删除的数据',
            type: 'warning'
          })
        }
        this.$confirm('确认删除选中的台账？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ids = []
          selections.forEach(item => {
            ids.push(item.id)
          })
          this.$http({
            url: '/salary/platformBills',
            method: 'post',
            traditional: true,
            data: this.$qs.stringify({ids : ids.join(",")})
          }).then( ({data}) => {
            this.$message({
              message: '删除成功',
              type: 'warning'
            })
            this.getTableData()//刷新列表
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>
<style lang="less" scoped>
  .emp-container {
    padding: 20px;
    position: relative;
    height: 100%;
  }
</style>
